<!-- 资质证书 -->
<template>
  <div>
    <div class="table-box">
      <CertificationTable :isEdit="isAlterApply" />
    </div>
    <a-card title="其他证件" :bordered="false">
      <a-upload
        action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
        :disabled="!isAlterApply"
        :multiple="true"
        :file-list="fileList"
        @change="handleChange">
        <a-button icon="upload">上传附件</a-button>
        <span class="ml-10" style="color:#101010;">支持xlsx、PDF、PNG、JPG、PPT等格式文件，大小≤5M</span>
      </a-upload>
    </a-card>
    <!-- 变更信息 -->
    <AlterInfo v-if="isAlterApply" />
    <div class="footer-box space-btn">
      <template v-if="isAlterApply">
        <a-button type="primary" @click="onSubmit">提交</a-button>
        <a-button @click="onCancel">取消</a-button>
      </template>
      <template v-else>
        <a-button type="primary" @click="onAlterApply">变更申请</a-button>
        <a-popover title="变更日志" trigger="click">
          <template slot="content">
            <JournalInfo />
          </template>
          <a-button>变更日志</a-button>
        </a-popover>
      </template>
    </div>
  </div>
</template>

<script>
import CertificationTable from '@views/supplier-manage/components/CertificationTable.vue'
import AlterInfo from '@views/supplier-manage/effect/components/AlterInfo.vue';
import JournalInfo from '@views/supplier-manage/effect/components/JournalInfo.vue';

export default {
  name: 'QualificationCertificate',
  components: {
    CertificationTable,
    AlterInfo,
    JournalInfo
  },
  data() {
    return {
      fileList: [
        {
          uid: '-1',
          name: '加盖其公章的收款公司银行账号说明.pdf',
          status: 'done',
          url: 'http://www.baidu.com/xxx.png',
        }
      ],
      isAlterApply: false
    };
  },
  mounted() {
  },
  methods: {
    handleChange(info) {
      let fileList = [...info.fileList];
      // 1. Limit the number of uploaded files
      //    Only to show two recent uploaded files, and old ones will be replaced by the new
      fileList = fileList.slice(-2);

      // 2. read from response and show file link
      fileList = fileList.map(file => {
        if (file.response) {
          // Component will show file.url as link
          file.url = file.response.url;
        }
        return file;
      });
      this.fileList = fileList;
    },
    onAlterApply() {
      this.isAlterApply = true;
    },
    onSubmit() {
      this.isAlterApply = false;
    },
    onCancel() {
      this.isAlterApply = false;
    }
  }
}
</script>

<style lang="less" scoped>
.table-box {
  padding: 10px 24px;
}

.footer-box {
  height: 50px;
  line-height: 50px;
  border-radius: 0px 0px 8px 8px;
  background-color: rgba(31, 127, 227, 0.08);
  color: rgba(16, 16, 16, 1);
  text-align: center;
  border: 1px solid rgba(204, 204, 204, 1);
}
</style>